import React from 'react';
import { WeaInputLocale, WeaLocaleProvider } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { Menu } from 'antd';
import ApiSingleShow from './ApiSingleShow';
import ApiShowStore from './../../stores/apiStore/ApiStore';
import Templet1 from './apiShowTemp/Templet1';

const getCurrentLabel = WeaInputLocale.getCurrentLabel;
const SubMenu = Menu.SubMenu;
const getLabel = WeaLocaleProvider.getLabel;// 获取多语言
@observer
export default class ApiShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: '/qxbGetDetailAndContactByName',
      store: new ApiShowStore(),
    };
  }
  componentWillMount() {
    const { getApiMenu } = this.state.store;
    getApiMenu(this);
  }
    render = () => {
      const { frontPath, requestParam, islist, disable, params } = this.state.store;
      // console.log(params);
      // console.log(frontPath);
      // console.log(disable)
      return (
        <div className="ApiMenu">
          {disable ?
            <Templet1
              ecId={`${this && this.props && this.props.ecId || ''}_Templet1@z0ikl2`}
              params={{ apiId: '542c2f9e498a4392a5ed221ab91b541d', query: JSON.stringify(requestParam) }}
              showAlertIcon
              name={getLabel('511140', '企业名称模糊匹配列表')}
              fuzzyMatchList
              fuzzyMatchParas={params}
            />
            :
            <div className="ApiMenu">
              <Menu
                ecId={`${this && this.props && this.props.ecId || ''}_Menu@w35d7j`}
                selectedKeys={[this.state.current]}
                mode="horizontal"
                onClick={this.onSelect}
              >
                {this.getApiMenuGroup(this.props.ecId || '')}
              </Menu>
              {frontPath != '' && <div className="api_container">
                <ApiSingleShow
                  ecId={`${this && this.props && this.props.ecId || ''}_ApiSingleShow@b7ggba`}
                  requestParam={requestParam}
                  frontPath={frontPath}
                  showAlertIcon
                  islist={islist}
                  nameLink="2"
                />
              </div>}
            </div>
          }
        </div>
      );
    }
    getApiMenuGroup = (ecId) => {
      const { groups } = this.state.store;
      const menuGroup = [];
      groups.map((group, index) => {
        if (group.item.length > 0) {
          menuGroup.push(
            <SubMenu ecId={`${ecId}_SubMenu@hufuxk@${index}`} title={<span className="submenu-title-wrapper">{getCurrentLabel(group.groupName)}</span>}>
              {group.item.length > 0 && this.getApiMenuItem(group.item, ecId)}
            </SubMenu>,
          );
        }
      });
      return menuGroup;
    }
    getApiMenuItem = (items, ecId) => {
      const menuItem = [];
      items.map((item, i) => {
        menuItem.push(
          <Menu.Item ecId={`${ecId}_MenuItem@wvkox2@${i}`} key={item.front_path}>{getCurrentLabel(item.itemName)}</Menu.Item>,
        );
      });
      return menuItem;
    }
    onSelect = (e) => {
      const key = e.key;
      this.setState({ current: key });
      const { changeMenu } = this.state.store;
      changeMenu(key);
    }
}
